/*
  打开页面
    + 请求回来第一页的用户列表数据
    + 把用户列表数据渲染在表格上

  点击添加用户按钮
    + 需要展示一个 dialog 弹出层
    + 弹出层内是一个表单
    + 表单用于采集用户信息
    + 问题: 关闭对话框, 肯定是需要清空文本框
      => 下次打开的时候, 需要是一个全新的文本框
      => 解决:
        -> 关闭对话框的时候, 需要重置一下表单
      => 什么时候会关闭对话框
        -> 点击对话框以外的位置
        -> 点击 X 按钮
        -> 点击取消按钮
      => elementUI 为 dialog 提供了一个事件
        -> close 事件, 关闭事件
*/
export default {
  name: 'Users',
  data () {
    return {
      // 用户列表数据
      users: [],
      // 请求参数信息
      info: {
        // 模糊查询的参数
        query: '',
        // 当前第几页
        pagenum: 1,
        // 一页显示多少条
        pagesize: 2
      },
      // 表示总条数
      total: 0,
      // 添加用户 dialog 是否显示
      addUserDialog: false,
      // 添加用户的相关信息
      addUserInfo: {},
      // 添加用户的表单验证
      addUserRules: {
        username: [
          { required: true, message: '请填写用户名', trigger: 'change' },
          { min: 3, message: '最少是3位字符', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'change' },
          { min: 3, message: '最少是3位字符', trigger: 'change' }
        ]
      },
      // 编辑用户 dialog 是否显示
      editUserDialog: false,
      // 编辑用户的相关信息
      editUserInfo: {
        email: '',
        mobile: '',
        id: 0
      },
      // 权限分配 dialog 是否显示
      rightsDialog: false,
      rightsInfo: {
        username: '',
        id: 0,
        rights: ''
      },
      // 权限列表
      rightsList: []
    }
  },
  created () {
    // 发送请求, 请求用户列表数据
    this.getUsersList()
  },
  methods: {
    // 获取用户列表
    async getUsersList () {
      // 直接发送请求, 请求列表数据
      const { data } = await this.$get('users', { params: this.info })
      this.total = data.total
      this.users = data.users
    },
    // 展示添加用户的 dialog
    // showAddUsers () {
    // 让 dialog 框显示
    // 修改 addUserDialog 信息为 true 即可
    // this.addUserDialog = true
    // 因为只有一句话, 直接书写在 标签身上 即可
    // }
    // 关闭添加用户的对话框
    closeAddUserDialogHandler () {
      // 只要关闭了对话框, 那么就重置表单
      // 重置验证规则
      // 重置带有验证规则的表单项
      this.$refs.addUser.resetFields()

      // 因为双项数据绑定
      // 还需要把 data 内的 addUserInfo 清空
      this.addUserInfo = {}
    },
    // 添加用户的事件处理函数
    addUserHandler () {
      // 1. 进行表单验证
      this.$refs.addUser.validate(async valid => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '请按照规则填写表单'
          })
          return
        }

        // 代码执行到这里, 说明表单验证通过了
        // 可以发送请求到服务器了
        const { meta } = await this.$post('/users', this.addUserInfo)
        /*
          如果创建成功
            + meta.status === 201
            + data 有内容
          如果创建失败
            + meta.status === 400
            + data 为 null
        */
        // 判断成功还是失败
        if (meta.status === 400) {
          this.$message({
            type: 'warning',
            message: meta.msg
          })
          return
        }

        // 代码来到这里, 说明添加成功了
        // 直接提示添加成功的信息即可
        this.$message({
          type: 'success',
          message: '添加用户成功'
        })

        // 关闭添加用户的 dialog 对话框
        this.addUserDialog = false

        // 从新请求一个列表数据
        this.getUsersList()
      })
    },
    // 修改用户状态事件处理函数
    async changeUserStateHandler (val) {
      // 发送请求给服务器, 进行数据的修改
      const { meta } = await this.$http.put(`users/${val.id}/state/${val.mg_state}`)

      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '修改用户状态成功'
        })
      }
    },
    // 删除用户的事件处理函数
    async deleteUserHandler (id) {
      console.log('你要删除 id 为 ' + id + ' 的用户')
      // 只要根据接口文档发送请求即可
      const { meta } = await this.$http.delete(`users/${id}`)

      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: meta.msg
        })

        // 从新加载一次当前页面数据
        this.getUsersList()
      }
    },
    // 显示编辑用户 dialog 事件处理函数
    async showEditUserDialogHandler (id) {
      // 发送请求, 按照 id 请求用户信息
      const { data } = await this.$get('users/' + id)

      // 把拿到的信息填充到 editUserInfo 中
      this.editUserInfo.id = data.id
      this.editUserInfo.username = data.username
      this.editUserInfo.mobile = data.mobile
      this.editUserInfo.email = data.email

      // 让 dialog 对框框显示
      this.editUserDialog = true
    },
    // 确认编辑用户的事件处理函数
    async editUserHandler () {
      const { meta } = await this.$put('users/' + this.editUserInfo.id, this.editUserInfo)

      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '编辑用户信息成功'
        })

        // 关闭 dialog
        this.editUserDialog = false

        // 从新请求一次列表数据
        this.getUsersList()
      }
    },
    // 展示分配权限对话框
    async showRightsHandler (val) {
      // 请求用户信息, 拿到用户名进行渲染
      // 因为用户名不能修改, 所以不需要后台请求了, 直接获取
      console.log(val)
      // 把 val 内的信息, 赋值给 rightsInfo
      this.rightsInfo.username = val.username
      this.rightsInfo.id = val.id

      // 发送请求, 请求身份列表
      // 根据身份列表信息, 显示 select 内的数据内容
      const { data } = await this.$get('roles')
      this.rightsList = data

      // 让对话框显示出来
      this.rightsDialog = true
    },
    // 确认权限分配
    async editRightHandler () {
      // 因为分配权限的 dialog 就是和 rightsInfo 进行双向数据绑定
      // 所以直接使用即可
      // 直接发送请求就好了
      const { meta } = await this.$put(`users/${this.rightsInfo.id}/role`, { rid: this.rightsInfo.rights })

      // 判断设置成功
      if (meta.status === 200) {
        this.$message({
          type: 'success',
          message: '设置用户角色成功'
        })

        // 再次请求列表数据
        this.getUsersList()

        // 关闭 dialog
        this.rightsDialog = false
      }
    }
  },
  watch: {
    info: {
      handler () {
        this.getUsersList()
      },
      deep: true
    }
  },
  filters: {
    format (val) {
      // 把时间戳转换成时间对象
      const t = new Date(val * 1000)

      // 获取时间对象内的信息
      const year = t.getFullYear()
      const month = t.getMonth() + 1
      const date = t.getDate()

      return `${year} 年 ${month} 月 ${date} 日`
    }
  }
}
